<template>
  <el-aside width="25%" class="my-aside">
    <div v-if="operate != 3 && operate != 4" class="subheading">
      <el-divider direction="vertical"></el-divider>
      <span>费用明细</span>
    </div>
    <div v-for="(item, index) in chargeDetailsUnPay" :key="index">
        <div class="head-flex">
          <div class="list-flex">
            <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-title-un":"drug-title"'>{{item.text}}</span>
            <template v-if="item.payStatus == 3">
            <span style="padding-left:5px;" class="un-title">(已退费)</span>
          </template>
          <template v-else-if="item.orderCondition == 5">
            <span style="padding-left:5px;" class="un-title">(已作废)</span>
          </template>
          </div>
        <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-title-un":"drug-title"'>{{item.value}}</span>
        </div>
        <div class="list-contetn-flex" style="border-bottom:1px #F1F1F1 solid;">
          <div class="head-flex">
            <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-list-font-un":"drug-list-font"'>{{item.drugCostName}}</span>
            <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-list-font-un":"drug-list-font"'>{{item.drugCost}}</span>
          </div>
          <div class="head-flex">
          <template v-if="item.processCost> 0">
            <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-list-font-un":"drug-list-font"'>{{item.processCostName}}</span>
            <span :class='item.payStatus == 3||item.orderCondition == 5?"drug-list-font-un":"drug-list-font"'>{{item.processCost}}</span>
          </template>
        </div>
      </div>
      
    </div>
    <div>
      <div v-if="operate != 0&&total.deliveryType == 1">
      <div class="head-flex">
        <div class="list-flex">
          <span :class='total.refundExp?"title-other-font-un":"title-other-font"'>邮寄费用</span>
          <span v-if="total.refundExp" style="padding-left:5px;" class="un-title">(已退费)</span>
        </div>
        <span :class='total.refundExp?"title-other-font-un":"title-other-font"'>{{parseFloat(total.expressFee).toFixed(2)}}</span>
      </div>
      </div>
      <div v-if="operate != 0">
        <div class="head-flex">
          <div class="list-flex">
            <span :class='total.refundOtherFee?"title-other-font-un":"title-other-font"'>其他费用</span>
            <span v-if="total.refundOtherFee" style="padding-left:5px;" class="un-title">(已退费)</span>
          </div>
        <span :class='total.refundOtherFee?"title-other-font-un":"title-other-font"'>{{parseFloat(total.otherFee).toFixed(2)}}</span>
      </div>
    </div>
    </div>
    <template v-if="operate === 1000">
      <div class="subheading">
        <el-divider direction="vertical"></el-divider>
        <span>设置折扣</span>
      </div>
      <div class="form-item">
        <span>统一折扣率：</span>
        <el-input-number 
          class="form-item-input" 
          placeholder="单位:%"
          size="small"
          :max="100"
          :min="0"
        ></el-input-number>
      </div>
    </template>
    <div v-if="operate != 3 && operate != 4 && operate != 0" class="subheading">
      <el-divider direction="vertical"></el-divider>
      <span>总计</span>
    </div>
    <div>
      <div class="head-flex">
        <span class="drug-title">费用合计</span>
        <span class="drug-title">{{parseFloat(total.totalFee).toFixed(2)}}</span>
      </div>
    </div>
    <div v-if="total.diffFee > 0">
      <div class="head-flex">
        <span class="drug-title">减免费用</span>
        <span class="drug-title">{{parseFloat(total.diffFee).toFixed(2)}}</span>
      </div>
    </div>
    <div v-if="total.cirulationCost > 0">
      <div class="head-flex">
        <span class="drug-title">流转金额</span>
        <span class="drug-title">{{parseFloat(total.cirulationCost).toFixed(2)}}</span>
      </div>
    </div>
    <div v-if="total.actualCharge > 0">
      <div class="head-flex">
        <span class="drug-title">优惠金额</span>
        <span class="drug-title">{{parseFloat(total.totalFee - total.actualCharge + total.expressFee + total.otherFee).toFixed(2)}}</span>
      </div>
    </div>
    <div v-if="operate != 0">
      <div class="head-flex">
        <span class="drug-title">实收金额</span>
        <span class="drug-title">{{parseFloat(total.actualCharge - total.cirulationCost).toFixed(2)}}</span>
      </div>
    </div>
    <div v-if="refundFee > 0">
      <div class="head-flex">
        <span class="drug-title">已退金额</span>
        <span class="drug-title">{{parseFloat(refundFee).toFixed(2)}}</span>
      </div>
    </div>
    <template v-if="operate >= 2 && curStep !== 5">
      <div class="subheading">
        <el-divider direction="vertical"></el-divider>
        <span>退费原因</span>
      </div>
      <div class="form-item" style="align-items: flex-start;">
        <span>退费原因：</span>
        <div class="form-item-input">{{ refundMsg }}</div>
      </div>
      <template v-if="refundTypeFlag">
        <div class="form-item" style="align-items: flex-start;">
          <span>库存处理方式：</span>
          <div class="form-item-input">{{ refundTypeText }}</div>
        </div>
      </template>
    </template>
    <template v-if="curStep === 5">
      <div class="subheading">
        <el-divider direction="vertical"></el-divider>
        <span>退费原因</span>
      </div>
      <div class="form-item" style="align-items: flex-start;">
        <span>退费原因：</span>
        <div class="form-item-input">{{ refundMsg }}</div>
      </div>
      <div class="form-item">
        <span>库存处理方式：</span>
        <template v-if="isAdjust">
          <el-select
            class="form-item-input"
            v-model="refundType"
            placeholder="请选择"
            size="small"
          >
            <template v-for="item in msgList">
              <el-option :key="item.id" :label="item.text" :value="item.id" />
            </template>
          </el-select>
        </template>
        <template v-else>未调剂不退库存</template>
      </div>
    </template>
    <template v-if="isReissue">
      <div class="subheading">
        <el-divider direction="vertical"></el-divider>
        <span>补发订单</span>
      </div>
      <div
        v-if="prescriptionType === 1 || prescriptionType === 3"
        style="align-items: flex-start;"
        class="form-item"
      >
        <span>补发剂数：</span>
        <div class="form-item-input">
          <el-input-number
            v-model="dosageNum"
          />
        </div>
      </div>
      <div class="form-item el-p-t-10">
        <span>补发原因：</span>
        <el-select
          @change="onChangeReissueReason"
          v-model="reissueReason"
          class="form-item-input"
          placeholder="请选择"
          size="small"
        >
          <template v-for="item in reissueReasons">
            <el-option :key="item.id" :label="item.text" :value="item.id" />
          </template>
        </el-select>
      </div>
      <template v-if="reissueReason === 999">
        <div class="form-item el-p-t-10">
          <el-input
            placeholder="请输入原因，10字以内"
            v-model="reissueReasonText"
            type="textarea"
            :maxlength="10"
            :rows="2"
          />
        </div>
      </template>
    </template>
    <template v-else-if="reasonInfo">
      <div class="subheading">
        <el-divider direction="vertical"></el-divider>
        <span>补发订单</span>
      </div>
      <div class="form-item el-p-t-10">
        <span>补发原因：{{ reasonInfo.reissueReason }}</span>
      </div>
    </template>
  </el-aside>
</template>

<script>
import { formatMoney } from "@/utils/index";
import { mapGetters } from "vuex";

export default {
  name: "asideForm",
  props: {
    // 操作
    operate: {
      type: Number,
      default: 0
    },
    // 流程，用在退费
    curStep: {
      type: Number,
      default: 0
    },
    details: {
      type: Array,
      default() {
        return [];
      }
    },
    // 费用合计
    total: {
      type: Object,
      default() {
        return {};
      }
    },
    // 退费列表
    refundList: {
      type: Array,
      default() {
        return [];
      }
    },
    // 补发标识
    isReissue: {
      type: Boolean,
      default: false,
    },
    // 处方类型
    prescriptionType: {
      type: Number,
      default: 0
    },
    // 补发单相关数据
    reasonInfo: {
      type: Object,
      default() {
        return null;
      }
    },
    // 一调剂标识
    isAdjust: {
      type: Boolean,
      default() {
        return [];
      }
    },
    // 退款库存处理方式
    refundTypeFlag: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      msgList: [
        { id: 0, text: "报损" },
        { id: 1, text: "退货入库" },
      ],
      names: {
        "1": "中药",
        "2": "西/成药",
        "3": "输液",
        "4": "敷贴"
      },
      refundType: null, // 是否退款入库
      dosageNum: 0, // 补发剂数
      reissueReason: null, // 补发原因
      reissueReasonText: null,
    }
  },
  computed: {
    ...mapGetters(["reissueReasons"]),
    chargeDetailsUnPay() {
      let res = [];
      if(!this.details || !this.details.length) return res;
      this.details.forEach(item => {
        res.push({
          text: item.name,
          processCostName: item.processCostName,
          drugCostName: item.drugCostName,
          payStatus: item.payStatus,
          orderCondition: item.orderCondition,
          value: formatMoney(item.money, 2),
          drugCost:formatMoney(item.drugCost, 2),
          processCost:formatMoney(item.processCost, 2),
        });
      });
      return res;
    },
    chargeSums() {
      let res = [];
      switch(this.operate) {
        case 0:
          res.push({ text: "费用合计：", value: formatMoney(this.total.total, 2) });
          res.push({ text: "折扣金额：", value: formatMoney(this.total.disMoney, 2) });
          res.push({ text: "应收费用：", value: formatMoney(this.total.receivable, 2), class: "big-money" });
          break;
        case 1:
        case 2:
        case 5:
          res.push({ text: "费用合计：", value: formatMoney(this.total.total, 2) });
          res.push({ text: "应收费用：", value: formatMoney(this.total.receivable, 2) });
          res.push({ text: "折扣金额：", value: formatMoney(this.total.disMoney, 2) });
          res.push({ text: "实收费用：", value: formatMoney(this.total.paid, 2) });
          res.push({ text: "现金：", value: formatMoney(this.total.cash, 2) });
          break;
      }
      return res;
    },
    refundInfos() {
      let res = [];
      switch(this.operate) {
        case 3:
          res.push({ text: "费用合计：", value: formatMoney(this.total.total, 2) });
          res.push({ text: "应收费用：", value: formatMoney(this.total.receivable, 2) });
          res.push({ text: "折扣金额：", value: formatMoney(this.total.disMoney, 2) });
          res.push({ text: "实收费用：", value: formatMoney(this.total.paid, 2) });
          if(this.total.refund) {
            res.push({ text: "已退金额：", value: formatMoney(this.total.refund, 2) });
          }
          res.push({ text: "应退金额：", value: formatMoney(this.total.refundNum, 2) });
          if(this.total.refundNum) {
            res.push({ text: "实退金额：", value: formatMoney(this.total.refundNum, 2), class: "big-money" });
          }
          break;
        case 4:
          res.push({ text: "应退金额：", value: formatMoney(this.total.refund, 2) });
          res.push({ text: "实退金额：", value: formatMoney(this.total.refund, 2), class: "big-money" });
          break;
        case 5:
          res.push({ text: "已退金额：", value: formatMoney(this.total.refund, 2) });
          break;
      }
      return res;
    },
    refundMsg() {
      let res = "";
      if(this.refundList && this.refundList.length) {
        this.refundList.forEach(item => {
          res += "，" + item.refundMsg;
        });
      }
      return res.substring(1);
    },
    // 已退金额
    refundFee() {
      let total = this.total;
      let res = 0;
      if(!this.refundList || !this.refundList.length) return res;
      this.refundList.forEach(item => {
        res += item.refund;
      });
      if(total.refundOtherFee) {
        res += total.otherFee; 
      }
      if(total.refundExp) {
        res += total.expressFee; 
      }
      return res;
    },
    refundTypeText() {
      let refundType = Number(this.refundTypeFlag);
      let res = "";

      switch(refundType) {
        case 0:
          res = "报损";
          break;
        case 1:
          res = "退货入库";
          break;
        case 2:
          res = "未调剂不退库存";
          break;
      }

      return res;
    }
  },
  watch: {
    isAdjust(val) {
      if(!val) {
        this.refundType = 2;
      } else {
        this.refundType = null;
      }
    }
  },
  mounted() {
    if(!this.isAdjust) {
      this.refundType = 2;
    }
  },
  methods: {
    resetForm() {
      if(!this.isAdjust) {
        this.refundType = 2;
      } else {
        this.refundType = null;
      }
      
      this.dosageNum = 0;
      this.reissueReason = null;
      this.reissueReasonText = null;
    },
    onChangeReissueReason() {
      if(this.reissueReason === 999) {
        this.reissueReasonText = null;
      } else {
        let item = this.reissueReasons.find(e => e.id === this.reissueReason);
        this.reissueReasonText = item.text;
      }
    },
    getReissueForm() {
      return {
        dosageNum: this.dosageNum,
        reissueReason: this.reissueReasonText,
      }
    }
  }
}
</script>

<style lang="scss">
.my-aside {

  .el-p-t-10 {
    padding-top: 10px;
  }

}
</style>